
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入图表类型，图表后缀都为 Chart
import {
    BarChart,
    LineChart,
    PieChart,
    ScatterChart,
    MapChart,
} from 'echarts/charts';

// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    VisualMapComponent,
    ToolboxComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { SVGRenderer, } from 'echarts/renderers';
import axios from 'axios';
// 将以上引入的组件使用use()方法注册
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart,
        LineChart, PieChart, ScatterChart, SVGRenderer, MapChart, VisualMapComponent, ToolboxComponent]
);

async function getData() {
    const dataList = await axios.get('/api/news/wap/fymap2020_data.d.json?_=1580892522427')
    const data = dataList.data.data.list.map((el: any, index: number) => {
        return { name: el.name, value: el.value }
    })
    return {
        title: {
            text: '国内疫情',
            subtext: '数据源于新浪',
            sublink:
                'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427'
        },
        series: [
            {
                type: 'map',
                map: 'china',
                zoom: 1.2,
                label: {
                    show: true,
                    fontSize: 10,
                    color: '#fff'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '1<br/>2 (p / km2)'
                },
                itemStyle: {
                    borderColor: "#19bbee",
                    areaColor: '#10B1FF'
                },
                data: data,
                // yiru 
                emphasis: {
                    itemStyle: {
                        borderColor: "#19bbee",
                        areaColor: '#fff'
                    },
                }
            }
        ],
        visualMap: {
            min: 0,
            max: 5000,
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#3BA272', '#FBCE5A', '#FC8452', '#FF0000']
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
    }
}
const optoonMap1 = getData()
//图表数据
const optionBox1 = {
    tooltip: {},
    legend: {
        top: 0,
        right: 30,
        data: ['销量1', '销量2']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量1',
            type: 'bar',
            color: '#EE6666',
            data: [5, 20, 36, {
                value: 43,
                // 设置单个柱子的样式
                itemStyle: {
                    color: 'red',
                    shadowColor: '#91cc75',
                    borderType: 'dashed',
                    opacity: 0.9
                }
            }, 10, 20]
        },
        {
            name: '销量2',
            type: 'bar',
            color: '#FAC858',
            data: [26, 24, 45, 22, 23, 20,],
            stack: 'xl2'
        },
        {
            name: '销量2',
            type: 'bar',
            color: '#3BA272',
            data: [3, 4, 8, 2, 3, 1,],
            stack: 'xl2',
        }
    ]
};
const optionBox2 = {
    tooltip: {},
    legend: {
        top: 0,
        right: 30,
        data: ['销量1', '销量2']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量1',
            type: 'line',
            color: '#EE6666',
            step: 'start',
            data: [5, 20, 36, {
                value: 43,
                // 设置单个柱子的样式
                itemStyle: {
                    color: 'red',
                    shadowColor: '#91cc75',
                    borderType: 'dashed',
                    opacity: 0.9
                }
            }, 10, 20],
            smooth: true
        },
        {
            name: '销量2',
            type: 'line',
            color: '#FAC858',
            data: [26, 24, 33, 22, 23, 10],
            stack: 'xl2',
            smooth: true,
        },
        {
            name: '销量2',
            type: 'line',
            color: '#3BA272',
            data: [3, 12, 0, 8, 13, 41],
            stack: 'xl2',
            smooth: true
        }
    ]
};
const optionBox3 = {

    series: [
        {
            color: ['red', '#3BA272', '#EE6666', '#FAC858', '#FC8452'],
            type: 'pie',
            radius: '45%',
            label: {
                show: true
            },
            data: [
                {
                    value: 100,
                    name: '小程序销售量',
                },
                {
                    value: 200,
                    name: 'app销售量',
                },
                {
                    value: 300,
                    name: '网页销售量',
                },
                {
                    value: 400,
                    name: '电商凭条销售量',
                },
                {
                    value: 500,
                    name: '线下销售量',
                }
            ],
            // roseType: 'area'
        }
    ]
};
const optionBox4 = {
    legend: {
        top: 0,
        right: 30,
        data: ['销量1', '销量2', '销量3']
    },
    xAxis: {
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {},
    series: [
        {
            type: 'scatter',
            color: ['#FAC858'],
            name: '销量1',
            data: [220, 182, 191, 234, 290, 330, 310],
            symbolSize: function (value: number) {
                return value / 30;
            }
        },
        {
            type: 'scatter',
            color: ['#EE6666'],
            name: '销量2',
            data: [120, 282, 391, 134, 390, 130, 110],
            symbolSize: function (value: number) {
                return value / 30;
            }
        },
        {
            type: 'scatter',
            color: ['#3BA272'],
            name: '销量3',
            data: [140, 182, 322, 234, 10, 30, 410],
            symbolSize: function (value: number) {
                return value / 30;
            }
        }
    ]
};
// 导出
export {
    optionBox1, optionBox2, optionBox3, optionBox4, optoonMap1, echarts
}